<html>
<head>                                                                            
    <meta charset="utf-8">                                                        
    <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    <meta http-equiv="X-UA-Compatible" content="ie=edge">                         
    <title>DeWeb </title>                                                          
    <!-- 引入样式 -->                                                             
    <link rel="stylesheet" type="text/css" href="dist/theme-chalk/index.css"/>    
    <!-- 引入组件库 -->                                                           
    <script src="dist/vue.js" type="text/javascript"></script>                    
    <script src="dist/index.js" type="text/javascript"></script>                  
    <script src="dist/axios.min.js" type="text/javascript"></script>              
</head>  
<body>
	<div id="example">
		<select size=2 multiple class="dwselect" v-model='workplaces' style="position:absolute;top:100px;left:20px;width:200px;height:260px;">
			<option class="dwoption" v-for='(city,index) in cities'   :value=city.value :key='index'>{{ city.text }}</option>
		</select>
		

		<p>workplace: {{ workplaces}}</p>
        <button v-on:click='buttonClickAtion' style="display: inline-block;margin-left: 20PX">Get</button>
        <button v-on:click='buttonClickAtion0' style="display: inline-block;margin-left: 20PX">Set</button>
	</div>
</body>

<script type='text/javascript'>
	new Vue({
		el: '#example',
		data: {
			cities: [
				{text: '西安', value: '1'}, 
				{text: '洛阳', value: '2'}, 
				{text: '南京', value: '3'}, 
				{text: '北京', value: '4'},
				{text: '西安2', value: '5'}, 
				{text: '洛阳2', value: '6'}, 
				{text: '南京2', value: '7'}, 
				{text: '北京2', value: '8'}
			],
			workplaces: []
		},
		methods:{
			buttonClickAtion:function()
			{
				alert(this.workplaces);
			},
			buttonClickAtion0:function()
			{
				this.workplaces = ["3","5",];
			}
	   }
	});
</script>
</html> 
